<template>
  <div>
    <calendar-slider :data-list="dataList" @change="handleChange" />
  </div>
</template>

<script>
import CalendarSlider from "./CalendarSlider.vue";

export default {
  components: {
    CalendarSlider,
  },
  data() {
    return {
      dataList: [
        {
          dataDay: 1,
          dataDate: "2024-01-01",
          targetAmount: 50.0,
        },
        {
          dataDay: 2,
          dataDate: "2024-01-02",
          targetAmount: 10.0,
        },
        {
          dataDay: 3,
          dataDate: "2024-01-03",
          targetAmount: 30.0,
        },
        {
          dataDay: 4,
          dataDate: "2024-01-04",
          targetAmount: 385.0,
        },
        {
          dataDay: 5,
          dataDate: "2024-01-05",
          targetAmount: 308.0,
        },
        {
          dataDay: 6,
          dataDate: "2024-01-06",
          targetAmount: 462.0,
        },
        {
          dataDay: 7,
          dataDate: "2024-01-07",
          targetAmount: 200.0,
        },
        {
          dataDay: 8,
          dataDate: "2024-01-08",
          targetAmount: 30.0,
        },
        {
          dataDay: 9,
          dataDate: "2024-01-09",
          targetAmount: 50.0,
        },
        {
          dataDay: 10,
          dataDate: "2024-01-10",
          targetAmount: 538.0,
        },
        {
          dataDay: 11,
          dataDate: "2024-01-11",
          targetAmount: 154.0,
        },
        {
          dataDay: 12,
          dataDate: "2024-01-12",
          targetAmount: 333.0,
        },
        {
          dataDay: 13,
          dataDate: "2024-01-13",
          targetAmount: 30.0,
        },
        {
          dataDay: 14,
          dataDate: "2024-01-14",
          targetAmount: 30.0,
        },
        {
          dataDay: 15,
          dataDate: "2024-01-15",
          targetAmount: 30.0,
        },
        {
          dataDay: 16,
          dataDate: "2024-01-16",
          targetAmount: 30.0,
        },
        {
          dataDay: 17,
          dataDate: "2024-01-17",
          targetAmount: 30.0,
        },
        {
          dataDay: 18,
          dataDate: "2024-01-18",
          targetAmount: 30.0,
        },
        {
          dataDay: 19,
          dataDate: "2024-01-19",
          targetAmount: 30.0,
        },
        {
          dataDay: 20,
          dataDate: "2024-01-20",
          targetAmount: 30.0,
        },
        {
          dataDay: 21,
          dataDate: "2024-01-21",
          targetAmount: 30.0,
        },
        {
          dataDay: 22,
          dataDate: "2024-01-22",
          targetAmount: 30.0,
        },
        {
          dataDay: 23,
          dataDate: "2024-01-23",
          targetAmount: 30.0,
        },
        {
          dataDay: 24,
          dataDate: "2024-01-24",
          targetAmount: 30.0,
        },
        {
          dataDay: 25,
          dataDate: "2024-01-25",
          targetAmount: 30.0,
        },
        {
          dataDay: 26,
          dataDate: "2024-01-26",
          targetAmount: 30.0,
        },
        {
          dataDay: 27,
          dataDate: "2024-01-27",
          targetAmount: 30.0,
        },
        {
          dataDay: 28,
          dataDate: "2024-01-28",
          targetAmount: 30.0,
        },
        {
          dataDay: 29,
          dataDate: "2024-01-29",
          targetAmount: 30.0,
        },
        {
          dataDay: 30,
          dataDate: "2024-01-30",
          targetAmount: 30.0,
        },
        {
          dataDay: 31,
          dataDate: "2024-01-31",
          targetAmount: 30.0,
        },
      ],
    };
  },
  methods: {
    handleChange({ date, amount }) {
      console.log("数据变更:", date, amount);
      // 这里可以执行保存操作
    },
  },
};
</script>